<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>行业最优关键词方案</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js" type="text/javascript"></script>
 <script src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js" type="text/javascript"></script>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/layui.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/global.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css" >


 <style>
  .container{
   	width:85%;
   	
  }
  
  .modal-industry{
  	width:700px;
  }
  .modal-body{
    max-height:750px
  }
   .modal-body-industry{
  	height:450px;
  }
    
 </style>

</head>
<body>
<%@include file="/webpage/frame/top.jsp" %>
<div class="container">
	<div id="modal" class="modal-industry modal fade" style="display:none">
		<div class="modal-dialog">
			<div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                    <span class='alert_input'></span>
                </div>
                <div class="modal-body-industry modal-body">
                    <div class="form-group">
                        <label>
                        	所属行业： <input id="industryName" type="text" class="form-control" name="industryName" placeholder="所属行业" readonly="readonly">
                           	&nbsp;&nbsp;方案标题：<input id="title" type="text" class="form-control" name="title" placeholder="方案标题" readonly="readonly">
                        </label>
                    </div>                		
                    <div class="form-group">
                    	<label>
                        	推广日期：<input id="promotionDate" type="text" class="form-control" name="promotionDate" placeholder="推广日期" readonly="readonly">
                        	&nbsp;&nbsp;保存时间：<input id="saveDate" type="text" class="form-control" name="saveDate" placeholder="保存时间" readonly="readonly">
                        </label>
                    </div>                		                		
                    <div class="form-group">
                        <label title="可以复制">推广关键词：</label>
                        <textarea placeholder="若内容被修改，可关闭重新查看" class="layui-textarea" name="promotionKeywordList" readonly="readonly"></textarea>
                    </div>                		
                    <div class="form-group">
                        <label title="可以复制">搜索关键词：</label>
                        <textarea placeholder="若内容被修改，可关闭重新查看" class="layui-textarea" name="keywordSearchList" readonly="readonly"></textarea>
                    </div>                	               		
                    <div class="form-group">
                        <label>备注：</label>
                        <textarea placeholder="" class="layui-textarea" name="remark" readonly="readonly"></textarea>
                    </div>                		                	              	                			
				</div>			
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <!-- <button type="button" class="btn btn-primary submit">提交</button> -->
                </div>				
			</div>
		</div>	
	</div>
	
	<div id="topContent" class="layui-form-pane">
		<div class="layui-form-item" style="margin-bottom:0px;">
		 <div class="layui-inline">
		      <label class="layui-form-label">按行业查询</label>
		      <div class="layui-input-inline">
		        <select id="industrySel" lay-verify="" lay-search style="margin-left:3px;">
		          <option value="">选择全部行业</option>
		        </select>
		      </div>
		    </div>		
		
		</div>
	</div>	

	<p class="toolbar">
         <!-- <button type="button" class="export-excel btn btn-primary btn-xs" data-table="#bestKeywordtable">导出Excel</button> -->
         <span class="alert"></span>
    </p>		
	<table id="bestKeywordtable"  data-show-refresh="true"
              data-search="true"
              data-click-to-select="true"
              data-show-export="true"
              data-query-params="queryParams"
              data-pagination="true"
		   	  data-toolbar=".toolbar"		   
              >
             <!-- data-show-columns="true" -->          
           <thead>
           <tr>
           	<th data-field="id" data-show="true" data-visible="false">id</th>
            <th data-field="industryName">所属行业</th>
            <th data-field="title">方案标题</th>
            <th data-field="promotionDate">推广日期</th>
            <th data-field="promotionKeywordList" data-visible="false">推广关键词</th>
            <th data-field="keywordSearchList" data-visible="false">搜索关键词</th>
            <th data-field="saveDate">保存时间</th>
            <th data-field="remark">备注</th>
            <th data-field="action"
                data-align="center"
                data-formatter="actionFormatter"
                data-events="actionEvents">操作</th>
           </tr>
           </thead>
		
	</table>

</div>

<script>
	var API_URL = '${pageContext.request.contextPath}/bestKeywordController.do?getBestKeywordByIndustry';	
	//加载最优关键词列表
	var $table = $('#bestKeywordtable').bootstrapTable(
			{
				url: API_URL,
				pageSize:25,
				pageList : [15, 25, 100, 500],
				//queryParams:{industryId:$('#industrySel').val()}
			}   		  
			 ),     
	   $modal = $('#modal').modal({show: false}),
	   $alert = $('.alert').hide(),
	   $alert_input = $('.alert_input').hide();
	
    function actionFormatter(value,row, index) {        
        return [
                '  <a class="update btn btn-default" href="javascript:" title="查看最优关键词方案">查看详细</a>',
                /* '  <a class="remove btn btn-default" href="javascript:" title="删除最优关键词方案">删除</a>', */
            ].join('');
    }
    
    window.actionEvents = {
            'click .update': function (e, value, row) {
            	showModal_update($(this).attr('title'), row);
            },
            'click .remove': function (e, value, row) {
                if (confirm('你确定要删除这信息?')) {
                    $.ajax({               	
                        url: '${pageContext.request.contextPath}/bestKeywordController.do?batchDelete',
                        type: 'post',
                        dataType: 'json', //预期的服务器响应的数据类型。
                        data:{id: row.id},
                        success: function (data) {
                           $table.bootstrapTable('refresh');
                        	if(data.success == true) {                     		
	                           showAlert(data.msg, 'success');                    		                   		
                        	}
                        	else {
	                           showAlert(data.msg, 'danger');                    		                   		                       		
                        	}
                        },
                        error: function () {
                            showAlert('删除行失败，异常!', 'danger');
                        }
                    });
                }
            }
    }
    
    //弹出窗口-修改
    function showModal_update(title, row) {
        row = row || {
        	id: '',
            industryName: '',
            title:'',
            promotionDate:'',
            promotionKeyword:'',
            keywordSearch:'',
            saveDate:'',
            remark:''
        }; // default row value

        $modal.data('id', row.id);
        $modal.find('.modal-title').text(title);
        
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
            $modal.find('textarea[name="' + name + '"]').val(row[name]);
        }    
        
    	$modal.modal('show');
    }   
    
   //延迟加载 
   $(function() {
	   //加载全部行业
	   loadIndustry();
	   
	   	TableExport.init();
	   	//导出按钮
	   	$('#export').click(function () {	   			   		
	   	  	$table.tableExport({
		   	      type: 'excel',
		   	      escape: false
		   	    });
	   	  	
	   	  });	   
   }); 
    
   //加载全部行业
   function loadIndustry() {
		$.get("${pageContext.request.contextPath}/industryController.do?getAllIndustry",
				function(result){
			      var data = $.parseJSON(result);			     
			       for(i=0;i<data.length;i++){				    	  
			    	  //$("#industrySel").append("<option value='"+data[i]["id"]+"'>"+data[i]["industry"]+"</option>");
			    	  $("#industrySel").append("<option value='"+data[i]["industry"]+"'>"+data[i]["industry"]+"</option>");
			       }				    	
				}					
		);   
   } 
   
    //按行业搜索
	$("#industrySel").click(
		function(){
			//刷新服务器数据
			//var query = {industryId:$('#industrySel').val()};
			//$('#bestKeywordtable').bootstrapTable('refresh', {query:query});
			
			//设置页面搜索内容 //$('#industrySel').find("option:selected").text()
			$('#bestKeywordtable').bootstrapTable('resetSearch', $('#industrySel').val());			
		}
	);
   

    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
    
    function showAlertModal(title, type) {   	
    	$alert_input.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
    	 setTimeout(function () {
    		 	$alert_input.hide();
         }, 3000);       
    }    
    
</script>
<%@include file="/webpage/frame/bottom.jsp" %>
</body>
</html>